<template>
  <div>
    <el-card style="height:90vh; ">
      <div class="mt-4">
        <el-input
          v-model="input3"
          style="max-width: 600px"
          placeholder="Please input"
          class="input-with-select"
        >
          <template #prepend>
            <el-select v-model="select" placeholder="Select" style="width: 115px; border-radius: 15px !important;">
              <el-option label="按学号" value="1" />
              <el-option label="按姓名" value="2" />
              <el-option label="按宿舍号" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button @click="selectClick()" :icon="Search" />
          </template>
        </el-input>
        <el-button type="primary" style="margin-left: 60px;" @click="handleClick2 = true">添加</el-button>
        <el-button type="primary" style="margin-left: 60px;" @click="BackClick">返回</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%;max-height:90vh">
  <el-table-column fixed prop="studentId" label="学号" width="200" align="center" />
  <el-table-column prop="studentName" label="姓名" width="200" align="center" />
  <el-table-column prop="dormitoryId" label="宿舍号" width="200" align="center" />
  <el-table-column prop="pay" label="需要支付" width="200" align="center" />
  <el-table-column fixed="right" label="Operations" min-width="200" align="center">
    <template #default="{ row }">
      <el-button link type="primary" size="small" @click="showDetail(row)">
        修改
      </el-button>
      <el-button link type="primary" size="small" @click="deleteStudents(row.studentId)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<el-dialog
    v-model="handleClick"
    title="修改学生信息"
    width="500"
    align-center
  >
    <el-form
        :model="form"
        label-width="120px"
        label-position="left"
      >
            <el-form-item label="学号" prop="studentId">
              <el-input
                v-model="form.studentId"
                placeholder="请输入学生学号"
              />
            
            </el-form-item>

            <el-form-item label="学生姓名" prop="studentName">
              <el-input
                v-model="form.studentName"
                placeholder="请输入学生姓名"
              />
            </el-form-item>
            <el-form-item label="宿舍号" prop="dormitoryId">
              <el-select
      v-model="value"
      placeholder="宿舍号"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
            </el-form-item>
       
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClick = false">取消按钮</el-button>
        <el-button type="primary" @click="upDatas()">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="handleClick2"
    title="添加学生信息"
    width="500"
    align-center
  >
    <el-form
        :model="form"
        label-width="120px"
        label-position="left"
      >
            <el-form-item label="学号" prop="studentId">
              <el-input
                v-model="form.studentId"
                placeholder="请输入学生学号"
              />
            
            </el-form-item>

            <el-form-item label="学生姓名" prop="studentName">
              <el-input
                v-model="form.studentName"
                placeholder="请输入学生姓名"
              />
            </el-form-item>
            <el-form-item label="宿舍号" prop="dormitoryId">
              <el-select
      v-model="value"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
            </el-form-item>
       
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClick2 = false">取消按钮</el-button>
        <el-button type="primary" @click="addDatas()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Back, Plus, Search } from '@element-plus/icons-vue'
import { getList,getAllList,upData,addData,getDormList,deleteStudent,getBystudentName,getBydormId} from '@/servers/modules/index'

const select = ref('')
const input3 = ref('')
const handleClick = ref(false)
const handleClick2 = ref(false)


const form = ref({})

const value = ref('')

const options = ref([])
const option = ref([])

//返回
const BackClick = () => {
  getAllList().then((res) => {
    console.log(res)
    tableData.value = res.data
  })
}

//删除学生信息
const deleteStudents = async (studentId) => {
  console.log('这是 studentId 的值:', studentId)
  
  const response = await deleteStudent(studentId)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  console.log('响应数据:', response)
  getAllList().then((res) => {
    console.log(res)
    tableData.value = res.data
  })
}

//添加学生信息
const addDatas = async () => {
  
  if(form.value.studentId == '' || form.value.studentName == '' || form.value.dormitoryId == ''){
    ElMessage({
    message: "信息不能为空",
    type: 'warning',
      })
  }else {
  console.log('这是 form学生 的值:', form.value)
  form.value.dormitoryId = value.value
  const response = await addData(form.value)
  if(response.code == 201) {
    ElMessage({
    message: response.message,
    type: 'warning',
      })
      }else{
        ElMessage({
        message: response.message,
        type: 'success',
      })
      }
  console.log('响应数据:', response)
  handleClick2.value = false
  getAllList().then((res) => {
    console.log(res)
    tableData.value = res.data
  })}
}

const showDetail = (row) => {
  // 将当前行的数据赋值给form对象
  form.value = { ...row };
  console.log(form.value);
  handleClick.value = true;
}


const tableData = ref([])
//修改
const upDatas = async () => {
  console.log('这是 form 的值:', form.value)
  form.value.dormitoryId = value.value
  const response = await upData(form.value)
  console.log('响应数据:', response)
  handleClick.value = false
  getAllList().then((res) => {
    console.log(res)
    tableData.value = res.data
  })
}

//查询
const selectClick = async () => {
  console.log('这是 select 的值:', select.value)
  console.log('这是 input 的值:', input3.value)
  if(select.value == '') {
    ElMessage({
      message: '请选择查询方式',
      type: 'warning',
    })
  }else if(input3.value == '') {
    ElMessage({
      message: '请输入查询值',
      type: 'warning',
    })
  }
  if(select.value == 1){
    if(isNaN(Number(input3.value))) {
      ElMessage({
        message: '查询值不符合规范',
        type: 'warning',
      })
    }else{
      selectById()
    }
  }
  if(select.value == 2){
    selectByName()
  }
  if(select.value == 3){
    if(isNaN(Number(input3.value))) {
      ElMessage({
        message: '查询值不符合规范',
        type: 'warning',
      })
    }else{
    selectByDormId()
  }
  }
}

const selectById = async () => {
  console.log('这是 input 的值:', input3.value)
  const response = await getList(input3.value)
  console.log('响应数据213:', response)
  tableData.value = response.data
}

const selectByName = async () => {
  const response = await getBystudentName(input3.value)
  console.log('响应数据:', response)
  tableData.value = response.data
}

const selectByDormId = async () => {
  const response = await getBydormId(input3.value)
  console.log('响应数据:', response)
  tableData.value = response.data
}



onMounted(() => {
  getAllList().then((res) => {
    console.log(res)
    tableData.value = res.data
  })
  getDormList().then((res) => {
    console.log('张三',res)
    option.value = res.data
    options.value = option.value.map((item) => {
      return {
        value: item.dormitoryId,
        label: item.dormitoryId
      }
    })
  })
})
</script>

<style scoped>
.mt-4 {
  display: flex;
  height: 50px;
  width: 100%;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.input-with-select{
  width: 100;
  height: 100%;
}
</style>